<template>
<div>
  <el-steps :active="2" align-center>
    <el-step title="填写课程基本信息" ></el-step>
    <el-step title="创建课程大纲"></el-step>
    <el-step title="最终发布" ></el-step>
  </el-steps>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
      <el-button style="float: left; padding: 3px 0" type="text" @click="addChapter()">添加章节</el-button>
     </div>
    </el-col>
  </el-row>
  <el-card  v-for="ch in chapters"   :key="ch.id" class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ch.title}}</span>
      <el-button style="float: right; padding: 3px 0;margin-left: 10px"  type="text" @click="chapDelete(ch.id)">删除</el-button>
      <el-button style="float: right; padding: 3px 0 ;margin-left: 10px" type="text" @click="uploadChapters(ch.id)">编辑</el-button>
      <el-button style="float: right; padding: 3px 0;margin-left: 10px" type="text" @click="addVideo">添加小节</el-button>
    </div>
    <el-card  v-for="v in ch.videos"   :key="v.id" class="box-card">
      <div slot="header" class="clearfix">
        <span>{{v.title}}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="videoDelete(v.id)">删除</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="videoUpload(v.id)">编辑</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="VideosDv(v.videoSourceId)">预览</el-button>
      </div>
    </el-card>
  </el-card>
  <el-dialog
    title="添加章节/编辑章节"
    :visible.sync="centerDialogVisible"
    width="60%"
    center>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="章节标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="章节排序">
        <el-input-number v-model="form.sort" :min="0" :max="10" ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="qx">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
    title="添加课时/编辑课时"
    :visible.sync="seaveViodo"
    width="60%"
    center>
    <el-form ref="form" :model="vidoform" label-width="80px">
      <el-form-item label="课时标题">
        <el-input v-model="vidoform.title"></el-input>
      </el-form-item>
      <el-form-item label="课时排序">
        <el-input-number v-model="vidoform.sort" :min="0" :max="10" ></el-input-number>
      </el-form-item>
      <el-form-item label="是否免费">
        <el-button @click="this.vidoform.isFree==1">免费</el-button>
        <el-button @click="this.vidoform.isFree==0">默认</el-button>
      </el-form-item>
      <el-form-item label="上传视频">
        <el-upload
           ref="upload"
           class="upload-demo"
          :action="BASE_URL+'/video/file'"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="handSuccess"
           :headers="Token"
           multiple
           name="file"
          :limit="1"
         >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="vidosSubimt">立即创建</el-button>
        <el-button @click=videosColse>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
    title="提示"
    :visible.sync="chardel"
    width="60%"
    center>
    <span>确定删除吗？</span>
        <el-button type="primary" @click="chardelSbit">是的</el-button>
        <el-button @click=chardelcole>取消</el-button>
  </el-dialog>
  <el-dialog
    title="提示"
    :visible.sync="videodel"
    width="60%"
    center>
    <span>确定删除吗？</span>
    <el-button type="primary" @click="videodelSbit">是的</el-button>
    <el-button @click=chardelcole>取消</el-button>
  </el-dialog>
  <el-button @click="fanhui()">返回上一步</el-button>
  <el-button type="primary" @click="next()">下一步</el-button>
  <el-dialog
    class="video"
    @close="colseVideo()"
    :visible.sync="playShow"
  >
    <ali-player
      v-if="playAuth"
      :vid="vid"
      :playauth="playAuth"
      qualitySort="asc"
      format="m3u8"
      mediaType="video"
      :encryptType=1
      ref="player"
      :autoplay=false
      :isLive=false
      :rePlay=false
      :preload=true
      controlBarVisibility="hover"
      :useH5Prism=true
    >
    </ali-player>
  </el-dialog>
</div>

</template>
<script>
import {getseave,getChildren,getUpload,getchaId,getChapdel} from "@/api/chapter"
import {getToken} from "@/utils/auth";
import {getvideoseave,getVioUpload,getVideoid,getvideodel,gethuixianv,getOss} from "@/api/video"


import VueAliplayer from '@/components/VueAilPlayer'

export default {
  components: { "ali-player": VueAliplayer },
  data() {
    return {
      playShow: false,
      vid: '', //视频vid
      playAuth: '', //鉴权地址
      chapterid:'',
      videoid:'',
      chardel:false,
      videodel:false,
      Token:{
        'token':getToken()
      },
      BASE_URL:process.env.VUE_APP_BASE_API,
      seaveViodo:false,
      centerDialogVisible:false,
      chapters:[],
      form:{
        id:'',
        sort:'',
        title:'',
        courseId:'',
        isFree:0
      },
      vidoform:{
        id:'',
        courseId:'',
        chapterId:'',
        title:'',
        sort:'',
        videoSourceId:'',
      },
    };
  },
  methods: {
    colseVideo(){

      // //重新子组件初始化

      this.$refs.player.initAliplayer()

    },

    fanhui(){
      this.$router.push({path:"/course/save",query:{saveid:this.$route.query.id}})
    },
    next(){
      this.$router.push({path:"/course/publish",query:{courseid:this.form.courseId}})
    },
    chardelcole(){
      this.chardel=false
      this.videodel=false
    },
    chapDelete(id){
      this.chapterid=id
      this.chardel=true
    },
    chardelSbit(){
      getChapdel(this.chapterid).then(res=>{
        if (res.code==20000){
          this.$message.success("删除成功!")
          this.getChidren()
          this.chardel=false
        }else{
          this.$message.error("删除失败!")
          this.chardel=false
        }
      })
    },
    videoDelete(id){
      this.videoid=id
      this.videodel=true
    },
    videodelSbit(){
      alert(this.videoid)
      getvideodel(this.videoid).then(res=>{
        if (res.code==20000){
          this.$message.success("删除成功!")
          this.getChidren()
          this.videodel=false
        }else{
          this.$message.error("删除失败!")
          this.videodel=false
        }
      })
    },
    videoUpload(id){
      this.seaveViodo=true
      this.vidoform.id=id
      getVideoid(id).then(res=>{
        if (res.code==20000){
          console.log(res)
         this.vidoform.sort=res.data.sort
          this.vidoform.videoSourceId=res.data.videoSourceId
          this.vidoform.title=res.data.title
          this.vidoform.courseId=res.data.courseId
          this.vidoform.chapterId=res.data.chapterId
          this.getChidren();
        }
      })
    },
    uploadChapters(id){
      this.centerDialogVisible=true
      this.form.id=id
      getchaId(id).then(res=>{
        if (res.code==20000){
          this.form.title=res.data.title
          this.form.sort=res.data.sort
        }
      })
    },
    VideosDv(vid){
      this.vid=vid
      getOss(vid).then(res=>{
        if (res.code==20000){
          this.vid = vid
          this.playAuth = res.data
          this.playShow = true
        }
      })
    },
    vidosSubimt(){
      if (this.vidoform.id!=''){
     console.log(this.vidoform)
     getVioUpload(this.vidoform).then(res=>{
    if (res.code==20000){
      this.$message.success("修改成功!")
      this.vidoform.id=''
      this.seaveViodo=false
    }else{
      this.$message.success("修改失败!")
      this.vidoform.id=''
      this.seaveViodo=false
    }
  })
      }else{
        console.log(this.vidoform)
        getvideoseave(this.vidoform).then(res=>{
          if(res.code==20000){
            this.$message.success(res.message)
            this.seaveViodo=false
            this.vidoform.title='',
            this.vidoform.sort=''
            this.$refs['upload'].clearFiles()
            this.getChidren()
          }
        })
      }
    },
    videosColse(){
    this.seaveViodo=false
      this.vidoform.title='',
        this.vidoform.sort=''
      this.$refs['upload'].clearFiles()
    },
    addVideo(){
      this.vidoform.courseId=this.form.courseId
      this.seaveViodo=true
    },
    handSuccess(response, file, fileList){
      console.log(response.data)
      this.vidoform.videoSourceId=response.data
    },
    qx() {
      this.centerDialogVisible = false
      this.form = {}
      this.form.courseId=this.$route.query.id
    },
    onSubmit() {
      if (this.form.id!=''){
        getUpload(this.form).then(res=>{
          if (res.code==20000){
            this.$message.success("修改成功!")
            this.centerDialogVisible=false
            this.form.id=""
            this.form.title=""
            this.form.sort=0
            this.getChidren();
          }else{
            this.$message.success("修改失败!")
            this.form.id=""
            this.centerDialogVisible=false
          }
        })
      }else{
        getseave(this.form).then(res => {
          if (res.code == 20000) {
            this.form.id = res.data
            this.vidoform.chapterId=res.data
            this.vidoform.courseId=this.$route.query.id
            this.getChidren()
            this.centerDialogVisible=false
            this.form.title=""
            this.form.sort=0
            this.form.id=""
          }
        })
      }

    },
    addChapter() {
      this.centerDialogVisible = true
    },
    getChidren() {
      getChildren(this.form.courseId).then(res => {
        if (res.code == 20000) {
          this.chapters = res.data
        }
      })
    },
    handleRemove(file, fileList) {

    },
    handlePreview(file) {


    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {

    }
  },


created() {
   let id=this.$route.query.id
   this.form.courseId=id
   this.getChidren();
  }
}

</script>
<style >
.video .el-dialog__header {
  padding: 0;
}

.video .el-dialog__body {
  padding: 0;
}



</style>
